<template>
  <el-row>
    <el-row>
      <el-col :span="8">
        <h2 id="tou">安静书屋</h2>
      </el-col>
      <el-col :span="16" style="padding-top: 30px">
        <el-row>
          <el-breadcrumb separator=" ">
            <el-breadcrumb-item><el-link>首页</el-link></el-breadcrumb-item>
            <el-breadcrumb-item><el-link>分类</el-link></el-breadcrumb-item>
            <el-breadcrumb-item><el-link>排行</el-link></el-breadcrumb-item>

            <el-breadcrumb-item
              ><el-badge value="new">
                <el-link>征文大赛</el-link>
              </el-badge>
            </el-breadcrumb-item>
            <el-breadcrumb-item><el-link>下载</el-link></el-breadcrumb-item>
            <el-autocomplete
              v-model="sou"
              placeholder="请输入"
              :fetch-suggestions="query"
              @select="sel"
              :trigger-on-focus="false"
            >
              <el-button
                type="primary"
                class="el-icon-search"
                slot="append"
              ></el-button>
            </el-autocomplete>

            <el-button type="primart" style="position: relative; bottom: 2px"
              >登录</el-button
            >
          </el-breadcrumb>
        </el-row>
      </el-col>
    </el-row>
    <el-row id="bg" style="margin-top: 10px">
      <el-col :span="24" :xs="24" style="background: black">
        <el-carousel activeNameItem="a">
          <el-carousel-item name="a">
            <el-image
              src="/static/4.jpg"
              style="width: 20%; height: 100%"
            ></el-image>
            <el-image
              src="/static/2.jpg"
              style="width: 25%; height: 100%"
            ></el-image>
            <el-image
              src="/static/7.jpg"
              style="width: 20%; height: 100%"
            ></el-image>
            <el-image
              src="/static/7.jpg"
              style="width: 25%; height: 100%"
            ></el-image>
          </el-carousel-item>
          <el-carousel-item name="b">
            <el-image
              src="/static/8.jpg"
              style="width: 25%; height: 100%"
            ></el-image>
            <el-image
              src="/static/9.jpg"
              style="width: 25%; height: 100%"
            ></el-image>
            <el-image
              src="/static/4.jpg"
              style="width: 20%; height: 100%"
            ></el-image>
            <el-image
              src="/static/4.jpg"
              style="width: 25%; height: 100%"
            ></el-image>
          </el-carousel-item>
        </el-carousel>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24" :xs="24">
        <h1 style="text-align: center" id="cb">出版图书</h1>
      </el-col>
      <el-col :span="24" :xs="24">
        <el-row>
          <el-col :span="7" :xs="15" :push="8">
            <el-breadcrumb separator="|">
              <el-breadcrumb-item>小说</el-breadcrumb-item>
              <el-breadcrumb-item>励志成功学</el-breadcrumb-item>
              <el-breadcrumb-item>文学</el-breadcrumb-item>
              <el-breadcrumb-item>经济管理</el-breadcrumb-item>
              <el-breadcrumb-item>更多</el-breadcrumb-item>
            </el-breadcrumb>
          </el-col>
        </el-row>
      </el-col>
    </el-row>

    <el-row>
      <el-col
        :span="8"
        :xs="24"
        style="border-right: 1px solid black; height: 500px"
      >
        <el-row>
          <el-col :span="24" :xs="24">
            <el-tag type="danger">重点推荐</el-tag><br />
            橙红年代:屌丝逆袭现代都市<br />
            <br />
            作者: 骁骑校<br />
            <br />
            一个小贩经历了八年血与火的考验后，沾满硝烟气息回到花花都市！
          </el-col>
          <el-row>
            <el-col :span="24" :xs="24" style="margin-top: 40px">
              <el-image src="/static/ch.jpg"></el-image>
            </el-col>
          </el-row>
        </el-row>
      </el-col>
      <el-col
        :span="8"
        :xs="24"
        style="border-right: 1px solid black; height: 500px"
      >
        <el-row>
          <el-col
            :span="12"
            :xs="12"
            style="box-sizing: border-box; padding: 30px"
          >
            <el-image src="/static/zm.jpg"></el-image><br />
            <el-link>我亲爱的小竹马</el-link><br />
            <span>酒小七</span>
          </el-col>
          <el-col
            :span="12"
            :xs="12"
            style="box-sizing: border-box; padding: 30px"
          >
            <el-image src="/static/hnv.jpg"></el-image><br />
            <el-link>悍妇三嫁</el-link><br />
            <span>秋李子</span>
          </el-col>

          <el-row>
            <el-col :span="24" :xs="24">
              <el-col
                :span="12"
                :xs="12"
                style="box-sizing: border-box; padding: 30px"
              >
                <el-image src="/static/ct.jpg"></el-image><br />
                <el-link>前妻的春天</el-link><br />
                <span>蓝岚</span>
              </el-col>
              <el-col
                :span="12"
                :xs="12"
                style="box-sizing: border-box; padding: 30px"
              >
                <el-image src="/static/yh.jpg"></el-image><br />
                <el-link ref="she" @click="she">异海</el-link><br />
                <span>蛇从革</span>
              </el-col>
            </el-col>
          </el-row>
        </el-row>
      </el-col>
      <el-col
        :span="8"
        :xs="24"
        style="
          border-box: box;
          padding-left: 30px;
          padding-bottom: 20px;
          height: 500px;
        "
      >
        <el-row>
          <el-col :span="24" :xs="24"></el-col>
        </el-row>
        <el-row>
          <el-collapse accordion value="0">
            <el-collapse-item name="1" title="大秦帝国">
              <br />
              <el-badge value="特别推荐"> 新书大秦帝国 </el-badge>
            </el-collapse-item>
            <el-collapse-item name="2" title="全世界都想要的他属于我">
              <br />
              <el-badge :value="num" :max="500">
                全世界都想要的他属于我
              </el-badge>
            </el-collapse-item>
            <el-collapse-item name="3" title="秦非得已">
              秦非得已
            </el-collapse-item>
            <el-collapse-item name="4" title="三体全集">
              三体全集
            </el-collapse-item>
            <el-collapse-item name="5" title="簪中录">
              簪中录
            </el-collapse-item>
            <el-collapse-item name="6" title="分手妻约">
              分手妻约
            </el-collapse-item>
            <el-collapse-item name="7" title="橙红年代屌丝逆袭">
              橙红年代屌丝逆袭
            </el-collapse-item>
            <el-collapse-item name="8" title="嫤语书年">
              嫤语书年
            </el-collapse-item>
            <el-collapse-item name="9" title="家有悍妻">
              家有悍妻
            </el-collapse-item>
            <el-collapse-item name="10" title="五大贼王">
              五大贼王
            </el-collapse-item>
          </el-collapse>
        </el-row>
      </el-col>
    </el-row>
    <el-backtop :visibility-height="he">
      <el-dropdown placement="top" trigger="hover">
        <i class="el-icon-arrow-up" style="font-size: 20px" type="success"></i>
        <el-dropdown-menu>
          <el-dropdown-item
            ><el-link href="#tou">头部</el-link></el-dropdown-item
          >
          <el-dropdown-item
            ><el-link href="#jx">精选圈子</el-link></el-dropdown-item
          >
          <el-dropdown-item
            ><el-link href="#man">男生频道</el-link></el-dropdown-item
          >
          <el-dropdown-item
            ><el-link href="#woman">女生频道</el-link></el-dropdown-item
          >
          <el-dropdown-item
            ><el-link href="#cb">出版图书</el-link></el-dropdown-item
          >
        </el-dropdown-menu>
      </el-dropdown>
    </el-backtop>
    <el-row>
      <el-col :span="24" :xs="24">
        <h1 id="jx" style="text-align: center">精选圈子</h1>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24" :xs="24">
        <el-row>
          <el-col
            :span="8"
            :xs="12"
            style="border: 1px solid antiquewhite; height: 260px"
          >
            <el-row>
              <el-col :span="16" :xs="16" :push="4" style="text-align: center">
                <el-badge value="new">
                  <el-image
                    src="/static/qc.jpg"
                    style="border-radius: 50px; height: 100px; width: 100px"
                  ></el-image>
                </el-badge>
                <h4>古代言情</h4>
                <p>相望古言，相聚古言，古言–我们的家园</p>
                <el-row>
                  <el-col :span="12" :xs="12">
                    <el-badge :value="index" :max="500">
                      <i class="el-icon-user-solid"></i>
                    </el-badge>
                  </el-col>
                  <el-col :span="12" :xs="12">
                    <el-badge :value="index" :max="500">
                      <i class="el-icon-s-order"></i>
                    </el-badge>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </el-col>
          <el-col
            :span="8"
            :xs="12"
            style="border: 1px solid antiquewhite; height: 260px"
          >
            <el-row>
              <el-col :span="16" :xs="16" :push="4" style="text-align: center">
                <el-badge value="love" type="primary">
                  <el-image
                    src="/static/xy.jpg"
                    style="border-radius: 50px; height: 100px; width: 100px"
                  ></el-image>
                </el-badge>
                <h4>现代言情</h4>
                <p>Hey, 你的少女心♥掉在这里了...</p>
                <el-row>
                  <el-col :span="12" :xs="12">
                    <el-badge :value="index" :max="500">
                      <i class="el-icon-user-solid"></i>
                    </el-badge>
                  </el-col>
                  <el-col :span="12" :xs="12">
                    <el-badge :value="index" :max="500">
                      <i class="el-icon-s-order"></i>
                    </el-badge>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </el-col>
          <el-col
            :span="8"
            :xs="24"
            style="border: 1px solid antiquewhite; height: 260px"
          >
            <el-row>
              <el-col :span="16" :xs="16" :push="4" style="text-align: center">
                <el-badge
                  value="young"
                  type="success"
                  style="background-color: bisque"
                >
                  <el-image
                    src="/static/yq.jpg"
                    style="border-radius: 50px; height: 100px; width: 100px"
                  ></el-image>
                </el-badge>
                <h4>青春校园</h4>
                <p>
                  青嶂青溪直复斜，春雪空濛帘外寒；校量功力相千万，园林月白秋霖散
                </p>
                <el-row>
                  <el-col :span="12" :xs="12">
                    <el-badge :value="index" :max="500">
                      <i class="el-icon-user-solid"></i>
                    </el-badge>
                  </el-col>
                  <el-col :span="12" :xs="12">
                    <el-badge :value="index" :max="500">
                      <i class="el-icon-s-order"></i>
                    </el-badge>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-col>

      <el-col :span="24" :xs="24" style="border: 1px solid antiquewhite">
        <h3 style="text-align: center; color: red">征文大赛进行时</h3>
        <el-row>
          <el-col :span="20" :xs="20" :push="3">
            <el-row>
              <el-col :span="4" :xs="24">
                <el-image
                  src="/static/tl.jpg"
                  style="border-radius: 50px; width: 100px; height: 100px"
                ></el-image>
                <el-link style="margin-bottom: 80px"
                  ><strong>悬疑推理</strong></el-link
                >
              </el-col>
              <el-col :span="4" :xs="24" :push="1">
                <el-image
                  src="/static/kh.jpg"
                  style="border-radius: 50px; width: 100px; height: 100px"
                ></el-image>
                <el-link style="margin-bottom: 80px"
                  ><strong>科幻</strong></el-link
                >
              </el-col>
              <el-col :span="4" :xs="24" :push="1">
                <el-image
                  src="/static/qg.jpg"
                  style="border-radius: 50px; width: 100px; height: 100px"
                ></el-image>
                <el-link style="margin-bottom: 80px"
                  ><strong>情感</strong></el-link
                >
              </el-col>
              <el-col :span="4" :xs="24" :push="1">
                <el-image
                  src="/static/wx.jpg"
                  style="border-radius: 50px; width: 100px; height: 100px"
                ></el-image>
                <el-link style="margin-bottom: 80px"
                  ><strong>武侠</strong></el-link
                >
              </el-col>
              <el-col :span="4" :xs="24" :push="1">
                <el-image
                  src="/static/wenxue.jpg"
                  style="border-radius: 50px; width: 100px; height: 100px"
                ></el-image>
                <el-link style="margin-bottom: 80px"
                  ><strong>文学</strong></el-link
                >
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    {{ this.$store.state.book }}
  </el-row>
</template>

<script>
export default {
  mounted() {
    this.restaurants = this.loadAll();
    this.$store.dispatch("book");
  },
  data() {
    return {
      num: 1000,
      he: 50,
      index: 3000,
      sou: "",
      book: "",
    };
  },
  methods: { // 模糊查询
    query: function (qu, cd) {
      const b = this.$store.state.book;
      console.log(b);
      const list = qu
        ? b.filter((x) => {
            return x.value.indexOf(qu) != -1
          })
        : b;
        console.log(list)
      cd(list);
    },
    sel: function () {},
    she: function () {
      let she = this.$refs.she;
      console.log(she);
    },
    but: function () {
      console.log(1);
    },
    querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString
        ? restaurants.filter((restaurant) => {
            //过滤函数变量数组类数字返回操作值
            if (restaurant.value.indexOf(queryString) === 0) {
              //类数组里面必须要有一个value自定义属性才能获取变量
              return restaurant;
            } //类数组过滤索引内容把符合条件的索引留下
            console.log(restaurant);
            // return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0;
          })
        : restaurants;
      // 调用 callback 返回建议列表的数据
      console.log(typeof results);
      cb(results); //返回对象js里面数组是对象数据类型是object
    },
    loadAll() {
      return [
        {
          value: "兵王在上",
          zuozhe: "红烧鲤鱼",
        },
        {
          value: "正道潜龙",
          zuozhe: "伪戒",
        },
        {
          value: "等你18岁吗，爸妈要离婚",
          zuozhe: "箫饭",
        },
      ];
    },
    created() {
      this.time = setInterval(() => {
        this.index = this.index + 1;
        if (this.index == this.src.length) {
          this.index = 0;
        }
      }, 10000);
    },
    destroyed() {
      clearInterval(this.time);
    },
  },
};
</script>